<template>
	<view class="container">
		<view class="bg_my"></view>
		<view class="nav_bar">
			<view class="safe-area" :style="{ height: statusBarHeight + 'px' }"></view>
			<view class="content" style="height: 92rpx;"></view>
		</view>
		<view class="my" :style="{ top: (statusBarHeight + 46) + 'px' }" @click="checkLogin">
			<view class="pic">
				<image src="https://yukukeji-oss.oss-cn-beijing.aliyuncs.com/source/XcxShopB1/head.png" mode="aspectFill"></image>
			</view>
			<view class="center" :style="{justifyContent: (!userInfo.number) ? 'center':'space-between'}">
				<text>{{ userInfo.userName ? userInfo.userName : "未登录" }}</text>
				<text v-if="userInfo.number">门店ID：{{ userInfo.number ? userInfo.number : "暂无门店信息" }}</text>
			</view>
			<!-- 			<view class="back">
				<van-icon name="arrow" />
			</view> -->
		</view>
		<view class="bottom_box">
			<view class="safe-area" style="height:376rpx"></view>
			<view class="inner">
				<view class="my_order">
					<view class="title">
						<view class="left">
							我的订单
						</view>
						<view class="right" @click="toOrderList(-1)">
							全部 <van-icon name="arrow" />
						</view>
					</view>
					<view class="icon_list">
						<van-grid :border="false" :column-num="5">
							<van-grid-item text="待付款" @click="toOrderList(0)">
								<template #icon>
									<view class="pic">
										<image src="/static/my/icon0.png" mode="aspectFill"></image>
										<view :class="userInfo.waitPay > 99 ? 'point2':'point1'" v-if="userInfo.waitPay">
											{{userInfo.waitPay > 99 ? '99+' : userInfo.waitPay}}</view>
									</view>
								</template>
							</van-grid-item>
							<van-grid-item text="待发货" @click="toOrderList(1)">
								<template #icon>
									<view class="pic">
										<image src="/static/my/icon1.png" mode="aspectFill"></image>
										<view :class="userInfo.waitDeliver > 99 ? 'point2':'point1'" v-if="userInfo.waitDeliver">
											{{userInfo.waitDeliver > 99 ? '99+' : userInfo.waitDeliver}}</view>
									</view>
								</template>
							</van-grid-item>
							<van-grid-item text="待收货" @click="toOrderList(2)">
								<template #icon>
									<view class="pic">
										<image src="/static/my/icon2.png" mode="aspectFill"></image>
										<view :class="userInfo.waitReceiving > 99 ? 'point2':'point1'" v-if="userInfo.waitReceiving">{{userInfo.waitReceiving > 99 ? '99+' : userInfo.waitReceiving}}</view>
									</view>
								</template>
							</van-grid-item>
							<van-grid-item text="已完成" @click="toOrderList(3)">
								<template #icon>
									<view class="pic">
										<image src="/static/my/icon3.png" mode="aspectFill"></image>
									</view>
								</template>
							</van-grid-item>
							<van-grid-item text="售后" @click="toOrderList(5)">
								<template #icon>
									<view class="pic">
										<image src="/static/my/icon7.png" mode="aspectFill"></image>
									</view>
								</template>
							</van-grid-item>
						</van-grid>
					</view>
				</view>
				<view class="message">
					<view class="pic">
						<image src="../../static/my/kefu.png" mode="aspectFill"></image>
					</view>
					<view class="center">
						<text>客户经理：{{ userInfo.serviceName }}</text>
						<text>电话：{{ userInfo.phone }}</text>
					</view>
					<view class="back" @click="cellPhone" v-if="userInfo.phone">
						<van-icon name="phone" />
						<text>拨打电话</text>
					</view>
				</view>
				<view class="my_order">
					<view class="title">
						功能列表
					</view>
					<view class="icon_list">
						<van-grid :border="false">
							<van-grid-item text="门店管理" @click="toGetShopInfo">
								<template #icon>
									<view class="pic">
										<image src="/static/my/icon4.png" mode="aspectFill"></image>
									</view>
								</template>
							</van-grid-item>
							<van-grid-item text="地址管理" @click="toRecevingAddress">
								<template #icon>
									<view class="pic">
										<image src="/static/my/icon5.png" mode="aspectFill"></image>
									</view>
								</template>
							</van-grid-item>
							<van-grid-item text="设置" @click="toSetting">
								<template #icon>
									<view class="pic">
										<image src="/static/my/icon6.png" mode="aspectFill"></image>
									</view>
								</template>
							</van-grid-item>
						</van-grid>
					</view>
				</view>
			</view>
		</view>
		<view class="beian">
			豫ICP备2024072340号-1X
		</view>
	</view>
</template>

<script>
	import { getToken } from '@/utils/auth'
	import { reqShopInfo, reqUserInfo } from '@/apis/user'
	import app from '@/App.vue'
	let token = "";
	export default {
		data() {
			return {
				statusBarHeight: app.globalData.statusBarHeight,
				userInfo: {
					phone: "",
					serviceName: "",
					number: "",
					complete: 0,
					waitDeliver: 0,
					waitPay: 0,
					waitReceiving: 0,
				},
			}
		},
		onShow() {
			token = getToken();
			if (token != '') {
				this.getUserInfo();
			} else {
				this.userInfo = {
					phone: "",
					serviceName: "",
					number: "",
					complete: 0,
					waitDeliver: 0,
					waitPay: 0,
					waitReceiving: 0,
				}
			}
		},
		methods: {
			async getUserInfo() {
				let res = await reqUserInfo();
				if (res.code === 200) {
					let { userName, number, phone, serviceName, complete, waitDeliver, waitPay, waitReceiving } = res.data;
					this.userInfo = { userName, number, phone, serviceName, complete, waitDeliver, waitPay, waitReceiving };
					uni.setStorageSync("customerPhone", phone);
				}
			},
			checkLogin() {
				if (token == '') {
					uni.navigateTo({ url: '/pages/login/login' });
				}
			},
			async toGetShopInfo() {
				let res1 = await this.$store.dispatch('user/getUserStatus');
				if (res1.code === 200) {
					if (res1.data.status == "4") {
						uni.navigateTo({ url: '/pages/login/login' });
						return;
					}
				}
				let res = await reqShopInfo();
				if (res.code === 200) {
					if (res.data === null || JSON.stringify(res.data) === "{}" || res.data === "") { // 未绑定门店
						uni.navigateTo({ url: '/packageA/pages/addShop/addShop?type=0' })
					} else {
						let { auditingStatus, remark } = res.data;
						if (auditingStatus == '0') { // 未审核
							uni.navigateTo({ url: '/packageA/pages/reviewProgress/reviewProgress?type=0' })
						} else if (auditingStatus == '1') { // 审核通过
							uni.navigateTo({ url: '/packageA/pages/addShop/addShop?type=1' })
						} else { // 审核失败
							uni.navigateTo({ url: `/packageA/pages/reviewProgress/reviewProgress?type=2&remark=${remark}` })
						}
					}
				}
			},
			cellPhone() {
				uni.makePhoneCall({ phoneNumber: this.userInfo.phone, fail: (error) => { console.log('用户取消拨打电话'); } })
			},
			toOrderList(index) {
				if(index === 5) {
					uni.navigateTo({url:'/packageA/pages/service/service'})
				} else {
					uni.navigateTo({ url: `/packageA/pages/orderList/orderList?index=${index}` })
				}
			},
			toRecevingAddress() {
				uni.navigateTo({ url: '/packageA/pages/receivingAddress/receivingAddress' })
			},
			toSetting() {
				uni.navigateTo({ url: '/packageA/pages/setting/setting' })
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.container {
		position: relative;
		height: 100vh;

		.nav_bar {
			position: absolute;
		}

		.bg_my {
			position: absolute;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 376rpx;
			z-index: -1;
			background: url('https://yukukeji-oss.oss-cn-beijing.aliyuncs.com/source/XcxShopB1/nav_bg.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center;
		}

		.my {
			position: absolute;
			width: 750rpx;
			display: flex;
			box-sizing: border-box;
			padding: 0 40rpx;
			margin-top: 12rpx;

			.pic {
				height: 108rpx;
				width: 108rpx;
				padding: 4rpx;
				border-radius: 50%;
				background-color: #fff;
				margin-right: 40rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.center {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				text {
					&:nth-child(1) {
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
						line-height: 44rpx;
					}

					&:nth-child(2) {
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}
			}

			.back {
				margin-left: auto;
				align-self: center;
				color: #fff;
				font-weight: bold;
			}
		}

		.bottom_box {
			box-sizing: border-box;

			.inner {
				width: 750rpx;
				padding: 24rpx;
				box-sizing: border-box;

				.my_order {
					width: 100%;
					padding: 24rpx;
					background-color: #fff;
					box-sizing: border-box;
					border-radius: 16rpx;
					margin-bottom: 24rpx;

					.title {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.left {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
						}

						.right {
							font-weight: 400;
							font-size: 26rpx;
							color: #808080;
						}
					}

					.icon_list {
						.pic {
							width: 52rpx;
							height: 52rpx;
							position: relative;

							image {
								width: 100%;
								height: 100%;
							}

							.point1 {
								position: absolute;
								top: -14rpx;
								right: -14rpx;
								width: 34rpx;
								height: 34rpx;
								background-color: #FF1642;
								border-radius: 50%;
								font-size: 18rpx;
								box-sizing: border-box;
								line-height: 34rpx;
								text-align: center;
								color: #fff;
							}
						}

						.point2 {
							position: absolute;
							top: -14rpx;
							right: -29rpx;
							min-width: 26rpx;
							min-height: 26rpx;
							background-color: #FF1642;
							border-radius: 40rpx;
							padding: 5rpx 10rpx;
							font-size: 18rpx;
							box-sizing: border-box;
							color: #fff;
						}
					}
				}

				.message {
					padding: 24rpx;
					display: flex;
					background-color: #fff;
					border-radius: 16rpx;
					margin-bottom: 24rpx;

					.pic {
						height: 108rpx;
						width: 108rpx;
						margin-right: 30rpx;
						padding-right: 22rpx;
						border-right: 1px solid #e5e5e5;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.center {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						text {
							&:nth-child(1) {
								font-weight: 500;
								font-size: 32rpx;
								line-height: 44rpx;
							}

							&:nth-child(2) {
								font-weight: 400;
								font-size: 24rpx;
								line-height: 34rpx;
								color: #666666;
							}
						}
					}

					.back {
						margin-left: auto;
						align-self: center;
						width: 196rpx;
						height: 64rpx;
						background: #EEEEEE;
						border-radius: 36rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						text-align: center;
						line-height: 64rpx;
					}
				}
			}
		}

		/deep/ .van-grid-item__content {
			padding: 32rpx 16rpx !important;
		}

		.beian {
			width: 750rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999;
		}
	}
</style>